import Vue from 'vue'
import VueRouter from 'vue-router'
import { getToken } from '@/utils/storage'

// import Login from '../views/Login'
// import Register from '../views/Register.vue'
// import Detail from '../views/Detail.vue'
// 下面这个组件就是布局组件，我们的首页就是 布局组件 + 二级组件  组合而成
import Layout from '../views/Layout.vue'
// 等下的二级路由就是 写在 layout组件的 children里面， 再给layout组件加一个路由出口 router-view
// import Article from '../views/Article.vue'
// import Collect from '../views/Collect.vue'
// import Like from '../views/Like.vue'
// import User from '../views/User.vue'

Vue.use(VueRouter)

const routes = [
  // 路由懒加载，访问到对应的页面才加载这个路由组件
  { path: '/login', component: () => import('../views/Login') },
  { path: '/register', component: () => import('../views/Register.vue') },
  { path: '/detail/:id', component: () => import('../views/Detail.vue') },
  {
    path: '/',
    component: Layout,
    // children里面的是二级路由，那二级路由的组件必须有地方渲染，这个地方就是路由出口，需要在Layout组件里面写一个<router-view></router-view>
    children: [
      { path: '/article', component: () => import('../views/Article.vue') },
      { path: '/collect', component: () => import('../views/Collect.vue') },
      { path: '/like', component: () => import('../views/Like.vue') },
      { path: '/user', component: () => import('../views/User.vue') }
    ]
  }
  // { path: '/login', component: Login },
  // { path: '/register', component: Register },
  // { path: '/detail/:id', component: Detail },
  // {
  //   path: '/',
  //   component: Layout,
  //   // children里面的是二级路由，那二级路由的组件必须有地方渲染，这个地方就是路由出口，需要在Layout组件里面写一个<router-view></router-view>
  //   children: [
  //     { path: '/article', component: Article },
  //     { path: '/collect', component: Collect },
  //     { path: '/like', component: Like },
  //     { path: '/user', component: User }
  //   ]
  // }
]

const router = new VueRouter({
  routes
})

// 路由白名单数组
const whiteList = ['/login', '/register']

// 路由全局守卫，就是所有路由在跳转之前，都会先执行这个函数
// 一般工作里面，我们使用to，在结合token进行判断，
// 怎么样判断用户有没有登录？ 就是看本地储存里面有没有token值
// 在结合to属性， 如果有token我们才让他路由放行，如果没有token，我们的路由就不放行，就强行回退到登录页面
router.beforeEach((to, from, next) => {
  // to 是一个对象，表示我们当前路由 要去那个页面
  // from也是一个对象，表示我们从什么页面路径 过来
  console.log(to, from, next)
  // 只有写了路由守卫，一定要写 next放行，
  // next()
  const token = getToken()
  console.log(111, token)
  if (token) {
    // 如果进入了这个分支，证明本地有token，就进一步证明我们登陆过，那么路由就可以放行
    next()
  } else {
    // 进入这个分支，就说明我们没有token，如果没有登录 也想去看首页，不让你进去，路由拦截，使用next给他强行跳转回登录页面
    // next('/login')
    // 路由白名单： 项目里面有些页面不需要登录就可以看的
    // if (to.path === '/login' || to.path === '/register') {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      // 没有token的情况下，访问首页，我们不让他访问，直接跳转到登录页面
      // 只有 跳转新路由，就会在执行一下 beforeEach
      next('/login')
    }
  }
})

export default router
